<div class="shrink-0 w-full h-28" (click)="close()"></div>
<div class="relative w-full flex-1 flex flex-col justify-start items-center rounded-t-3xl bg-gray-50 overflow-auto">
  <div class="flex-1 max-w-lg pt-4">
    <div class="w-full text-lg font-medium p-4 text-left">{{'PAC.ChatBI.NewChatBIModel' | translate: {Default: 'New ChatBI Model'} }}</div>

    <form class="flex flex-wrap gap-4 p-4" [formGroup]="formGroup">
      <div class="flex-1">
        <ngm-select class="w-full" [label]="'PAC.ChatBI.SemanticModel' | translate: {Default: 'Semantic Model'}" valueKey="key"
          [displayBehaviour]="DisplayBehaviour.descriptionOnly"
          formControlName="modelId"
          searchable
          [selectOptions]="models()"
        >
          <a help [routerLink]="['/models/']" target="_blank" rel="noopener noreferrer" class="inline-flex items-center p-1 text-xs !text-primary-400 hover:!text-primary-600">
            {{'PAC.Xpert.HowtoCreate' | translate: {Default: 'How to create'} }}
            <i class="ri-external-link-line"></i>
          </a>

          @if (modelIdRequiredError) {
            <div ngmError>{{'PAC.KEY_WORDS.Required' | translate: {Default: 'Required'} }}</div>
          }
        </ngm-select>
      </div>
      
      <ngm-select class="flex-1" [label]="'PAC.ChatBI.Entity' | translate: {Default: 'Entity'}" valueKey="key"
        [displayBehaviour]="DisplayBehaviour.descriptionOnly"
        formControlName="entity"
        searchable
        [selectOptions]="entities()"
      >
        @if (entityRequiredError) {
          <div ngmError>{{'PAC.KEY_WORDS.Required' | translate: {Default: 'Required'} }}</div>
        } @else if (entityNotFound()) {
          <div ngmError>{{'PAC.ChatBI.EntityNotFound' | translate: {Default: 'Entity not found'} }}</div>
        }
      </ngm-select>
          
      <ngm-input class="flex-1 min-w-full" [label]="'PAC.ChatBI.Caption' | translate: {Default: 'Caption'}" valueKey="key"
        formControlName="entityCaption"
      />
      
      <div class="flex-1 min-w-full flex flex-col">
        <label class="ngm-input-label shrink-0">{{'PAC.ChatBI.Description' | translate: {Default: 'Description'} }}</label>
        <textarea class="ngm-input-element" matInput formControlName="entityDescription"
          cdkTextareaAutosize
          cdkAutosizeMinRows="1"
          cdkAutosizeMaxRows="5">
        </textarea>
      </div>
    </form>
  </div>

  <div class="w-full sticky bottom-0 flex justify-center bg-gray-50">
    <div class="max-w-lg flex justify-between items-center p-4">
      <div></div>
      <div ngmButtonGroup>
        <button mat-button (click)="close()">{{'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}</button>
        <button mat-raised-button color="primary" [disabled]="loading() || formGroup.invalid || formGroup.pristine || entityNotFound()"
          (click)="saveAll()"
        >{{'PAC.KEY_WORDS.Save' | translate: {Default: 'Save'} }}</button>
      </div>
    </div>
  </div>
</div>

@if (loading()) {
  <ngm-spin class="absolute w-full h-full flex justify-center items-center"></ngm-spin>
}